@import "./common";

body {
    // padding-top: vw(170);
    padding: vw(170) vw(80) vw(127);

    .container {
        position           : relative;
        width              : 100%;
        height             : 100%;
        margin             : 0 auto;
        background-color   : rgba(247, 251, 254, 0.4);
        box-shadow         : 0 vw(4) vw(13) vw(5) rgba(0, 0, 0, 0.3);
        border-radius      : vw(10);
        font-family        : "SourceHanSansCN-Medium";
        overflow           : hidden;
        // padding-bottom  : vw(63);
        padding-right      : vw(50);
        display            : flex;
        flex-direction     : column;
        justify-content    : space-around;

        .select {
            margin-top    : vw(69);
            margin-left   : vw(52);
            font-size     : vw(30);
            font-weight   : normal;
            font-stretch  : normal;
            line-height   : vw(42);
            letter-spacing: 0;
            color         : #0075c1;
            display       : flex;
            align-items   : center;

            .day {
                font-size: vw(30);
            }

            .triangle {
                width       : 0;
                height      : 0;
                border-left : vw(9) solid transparent;
                border-right: vw(9) solid transparent;
                border-top  : vw(12) solid #0075c1;
                margin-left : vw(10);
            }
        }

        .content {
            // width      : vw(404);
            margin-top     : vw(88);
            margin-left    : vw(92);
            height         : 100%;
            display        : flex;
            flex-direction : column;
            justify-content: space-around;

            .title {
                display        : flex;
                justify-content: space-between;
                font-size      : vw(26);
                font-weight    : bold;
                font-stretch   : normal;
                line-height    : vw(18);
                letter-spacing : 0;
                color          : #0075c1;

                .session {
                    width     : vw(141);
                    text-align: center;
                    font-size : vw(26);
                }

                .state {
                    width     : vw(200);
                    text-align: center;
                    font-size : vw(26);
                }
            }

            .time-lists {
                height         : 100%;
                display        : flex;
                flex-direction : column;
                justify-content: space-around;
                margin-bottom  : vw(88);


                .list {
                    display        : flex;
                    justify-content: space-between;
                    align-items    : center;

                    .time-quantum {
                        text-align: center;
                    }

                    .condition {
                        width      : vw(200);
                        height     : vw(60);
                        text-align : center;
                        color      : red;
                        font-weight: 700;
                    }

                    .orderBtn {
                        width           : vw(200);
                        height          : vw(60);
                        border-radius   : vw(15);
                        background-color: #fffeff;
                        color           : #76ab75;
                        font-size       : vw(30);
                        font-weight     : 900;
                        border          : vw(2) solid #2a2a2a;
                        box-shadow      : 0 vw(4) vw(13) vw(5) rgba(0, 0, 0, 0.3);
                    }
                }
            }
        }

        .tips {
            position   : absolute;
            display    : block;
            bottom     : vw(63);
            margin-left: vw(92);
            height     : vw(25);
            font-size  : vw(26);
            color      : #434242;
        }

        .cover {
            position        : absolute;
            top             : vw(157);
            left            : vw(92);
            width           : vw(404);
            background-color: rgba(0, 0, 0, 1);
            border-radius   : vw(15);
            transform       : scale(0);
            transition      : all 0.3s;
            z-index         : 99;

            .select-time {
                width          : 100%;
                height         : vw(80);
                margin-bottom  : -vw(1);
                padding        : 0 vw(40) 0 vw(40);
                border-bottom  : vw(1) solid #fff;
                display        : flex;
                align-items    : center;
                justify-content: space-between;

                .time {
                    height     : 100%;
                    line-height: vw(80);
                    color      : #fff;
                }
            }
        }

        .verify {
            position        : absolute;
            top             : vw(157);
            left            : 5%;
            width           : 90%;
            height          : 70%;
            background-color: rgb(235, 239, 242);
            border-radius   : vw(15);
            text-align      : center;
            transform       : scale(0);
            transition      : all 0.3s;
            z-index         : 11;

            h2 {
                color : red;
                margin: vw(70) 0;

                &+div {
                    color      : #2a2a2a;
                    font-weight: bold;
                }

                &~div {
                    margin-bottom: vw(50);
                }
            }

            button {
                border       : vw(1) solid;
                width        : vw(150);
                height       : vw(60);
                border-radius: vw(15);
                margin       : 0 vw(25);
            }
        }
    }

    .shade {
        position        : absolute;
        left            : 0;
        top             : 0;
        width           : 100%;
        height          : 100%;
        background-color: rgba(42, 42, 42, 0.3);
        display         : none;
    }
}